<script setup lang="ts">
import { useNRTCHK } from '@/hooks/rtc';
import { StorageSerializers } from '@vueuse/core';
import domready from 'domready'
import { NRTC, NRTCEvents } from 'nrtc-web';
import UrlParse from 'url-parse'
import { XMarkIcon } from '@heroicons/vue/24/solid'

const nrtc = inject<NRTC>('nrtc')

const forms = useLocalStorage('nrtc-config', {
  rtcAppId: 'nn_rtc_hzMhyPe6',
  url: '',
  extraInfo: '',
  nrtcSign: '',
})

const roomInput = ref<number>()

const rooms = useLocalStorage<number[]>('rooms', [], {
  serializer: StorageSerializers.object
})

const scope = effectScope()
const router = useRouter();

scope.run(() => {
  nrtc?.on(NRTCEvents.onJoinRoom, ({ roomId }) => {
    router.push(`/home/${roomId}`)
  })

  nrtc?.on(NRTCEvents.onLeaveRoom, () => {
    router.push('/')
  })
})

const addRoom = () => {
  if (roomInput.value) {
    rooms.value.push(roomInput.value)
    roomInput.value = undefined
  }
}

const deleteRoom = (room: number) => {
  rooms.value = rooms.value.filter((r) => r !== room)
}

const enterRoom = (roomId: number) => {
  if (roomId) {
    nrtc?.enterRoom({
      ...forms.value,
      roomId
    })
  }
}

domready(() => {
  const urlParse = new UrlParse(window.location.href, true)
  console.log('domready', nrtc, urlParse)


})

</script>

<template>
  <main
    class='space-y-10 border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-slate-400 dark:text-slate-200'>
    <table class='table-fixed w-full table table-zebra rounded'>
      <thead>
        <tr class='gap-2'>
          <th v-for='(v, k) in forms' :key='k'
            class='border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left'>
            <label v-text='k' :for='`#${k}`' />
          </th>
        </tr>
      </thead>
      <tbody class='text-center'>
        <tr>
          <td v-for='(v, k, i) in forms' :key='k'
            class='border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400'>
            <input v-model='forms[k]' :placeholder='k' :id='k' class="input input-bordered w-full max-w-xs" />
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan='2'>
            <label class="input input-bordered w-full flex items-center gap-2">
              <input type='text' class='grow' v-model='roomInput' placeholder='房间号' />
              <button class='btn btn-xs btn-primary' @click="addRoom">添加</button>
            </label>
          </td>
        </tr>
      </tfoot>
    </table>

    <ul class='grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4'>
      <li v-for='room, i in rooms' :key='room'>
        <label class="input input-bordered flex items-center gap-2">
          <input text='text' class="grow" v-model='rooms[i]' />

          <button class='btn btn-xs btn-error btn-square' @click="deleteRoom(room)">
            <XMarkIcon class='w-4 h-4' />
          </button>

          <button class='btn btn-xs btn-primary' @click='enterRoom(room)'>
            进入房间
          </button>
        </label>
      </li>
    </ul>
  </main>
</template>
